@import "public";

.webZ,.dec {
    width: 1000px;
    margin: 0 auto;
}
.webZ {    
    .crumbs {
        padding: 20px 0;
        margin-bottom: 20px;
        border-bottom: 1px solid #e8e8e8;
        a {
            color: #222;
        }
        code {
            padding: 0 3px;
        }
    }
    .goods {
        margin-bottom: 30px;
        .magnifier {
            float: left;
            margin-right: 30px;
            width: 400px;
            position: relative;
            .magnifier-container {
                width: 398px;
                height: 398px;
                border: 1px solid #EDEDED;
                overflow: hidden;
                position: relative;                
                .images-cover {
                    width: 100%;
                    height: 100%;
                    position: relative;
                    img {
                        width: 398px;
                        height: 398px;
                        position: absolute;
                    }
                }
                .move-view {
                    width: 60px;
                    height: 60px;
                    position: absolute;
                    background: rgba(255,255,255,0.6);
                    top: 0;
                    left: 0;
                    display: none;
                }
            } 
            .smallImage {
                width: 390px;
                height: 60px;
                margin: 0 auto;
                padding: 10px 30px 10px 30px;
                position: relative;
                .magnifier-line {
                    width: 350px;
                    height: 60px;
                    position: relative;
                    overflow: hidden;
                    .animation03 {
                        width: 1000px;
                        height: 60px;
                        position: absolute;
                        left: 0;
                        li {
                            width: 58px;
                            height: 58px;
                            float: left;
                            margin-right: 10px;
                            border: 1px solid #EDEDED;
                            position: relative;
                            cursor: pointer;
                            &:hover {
                                border-color: #F70800;
                            }
                            img {
                                width: 58px;
                                height: 58px;
                            }
                            
                        }
                    }
                }
                .btn {
                    width: 10px;
                    height: 15px;
                    cursor: pointer;
                    display: block; 
                    position: absolute;
                    top: 50%;
                    margin-top: -7.5px;                   
                }
                .prev {
                    background: url(../images/icons2.png) no-repeat -20px -11px;
                    left: 10px;
                }
                .next {
                    background: url(../images/icons2.png) no-repeat -110px -11px;
                    right: 60px;
                }
                
            }  
            .magnifier-view {
                position: absolute;
                border: 1px solid #ccc;
                overflow: hidden;
                left: 400px;
                top: 0;
                z-index: 99;  
                display: none;              
            }         
        }
        .goodsRight {
            float: right;
            position: relative;
            width: 570px;
            .brand {
                width: 570px;
                height: 27px;
                padding-left: 10px;
                margin-bottom: 5px;
                line-height: 27px;
            }
            h2 {
                color: #222;
                font-size: 18px;
                height: 22px;
                line-height: 22px;
                margin-bottom: 10px;
                font-weight: 900;
            }
            .price {
                padding: 15px 10px 10px 10px;
                border-bottom: 1px solid #e8e8e8;
                position: relative;
                background: #fafafa;
                margin-bottom: 15px;
                color: #666;
                .priFirst {
                    height: 34px;
                    .sp1 {
                        line-height: 34px;
                        height: 34px;
                        display: block;
                        float: left;
                    }
                    .sp2 {
                        font-size: 34px;
                        line-height: 34px;
                        color: #F70800;
                        font-family: arial;
                        margin-left: 25px;
                        display: block;
                        float: left;
                        em {
                            font-size: 24px;
                            margin-right: 5px;
                            height: 24px;
                            display: block;
                            line-height: 34px;
                            float: left;                           
                        }
                        
                    }
                }
                .pricSecond {
                    background: #eef;
                    width: 300px;
                    .sp3 {
                        float: left;
                        line-height: 34px;
                        height: 34px;
                        display: block;
                    }
                    p {
                        float: left;
                        margin-top: 10px;
                       i {
                            padding: 1px 8px;
                            margin-left: 20px;
                            margin-right: 5px;
                            border-radius: 2px;
                            color: #fff;
                            text-align: center;
                            background: #FF504A;                                                   
                        } 
                    }
                    
                }
            }
            .city {
                select {
                    height: 26px;
                    padding: 0 5px;
                    margin-left: 10px;
                }
            }
            .num {
                height: 26px;
                margin-top: 10px;
                span {
                    float: left;
                    display: block;
                    height: 26px;
                    line-height: 26px;
                }
                .box {
                    height: 28px;
                    float: left;
                    margin-left: -20px;
                    a {
                        display: block;
                        width: 26px;
                        height: 26px;
                        text-align: center;
                        line-height: 26px;
                        color: #222;
                        float: left;
                        border: 1px solid #ccc;
                    }
                    input {
                        height: 26px;
                        width: 50px;
                        display: block;
                        float: left;
                        text-align: center;
                        line-height: 26px;
                        border-top: 1px solid #ccc;
                        border-bottom: 1px solid #ccc;
                    }
                }
                .caution {
                    height: 26px;
                    padding: 0 10px 0 30px;
                    line-height: 26px;
                    border: 1px solid #ffc8c8;
                    color: #F70800;
                    float: left;
                    margin-left: 150px;
                    position: relative;
                    opacity: 0;
                    i {
                        width: 14px;
                        height: 14px;
                        position: absolute;
                        top: 6px;
                        left: 10px;
                        display: block;
                        background: url(../images/icons2.png) no-repeat -100px -336px;
                    }
                }
            }
            .addCart {
                width: 190px;
                height: 40px;
                line-height: 40px;
                color: #fff;
                border-radius: 2px;
                background: #FF504A;
                border: 0;
                margin-top: 30px;
                font-size: 14px;
                padding-left: 15px;
                cursor: pointer;
                position: relative;
                text-align: center;
                i {
                    background: url(../images/icons2.png) no-repeat -72px -309px;
                    width: 20px;
                    height: 16px;
                    display: block;
                    position: absolute;
                    top: 12px;
                    left: 45px;
                    margin-right: 10px;
                }
            }
            .tvShop {
                background: url(../images/icon_3.png) no-repeat left center;
                padding: 10px 5px 5px 30px;
            }
            
        }
    }    
}
.dec {
    height: 80px;
    margin-bottom: 20px;
    background: url(../images/declaration2.jpg) no-repeat;
}
